<template>
    <div class="sizer">
        <!-- form表单筛选器 -->
        <!-- <van-form>
            <van-field name="radio" label="单选框">
                <template #input>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="1">单选框 1</van-radio>
                        <van-radio name="2">单选框 2</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field name="radio" label="单选框">
                <template #input>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="1">单选框 1</van-radio>
                        <van-radio name="2">单选框 2</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field name="radio" label="单选框">
                <template #input>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="1">单选框 1</van-radio>
                        <van-radio name="2">单选框 2</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </van-form> -->
        <van-radio-group
            v-model="radios.type"
            direction="horizontal"
            @change="changeSizer"
        >
            <van-radio
                name="1"
                shape="square"
                :class="{ selectItem: radios.type === '1' }"
                >全选</van-radio
            >
            <van-radio name="2" shape="square">单选</van-radio>
        </van-radio-group>
        <van-radio-group v-model="radios.Charge" direction="horizontal">
            <van-radio name="1">单选框 1</van-radio>
            <van-radio name="2">单选框 2</van-radio>
        </van-radio-group>
        <van-radio-group v-model="radios.condition" direction="horizontal">
            <van-radio name="1">单选框 1</van-radio>
            <van-radio name="2">单选框 2</van-radio>
        </van-radio-group>
    </div>
</template>

<script>
export default {
    name: 'sizer',
    data() {
        return {
            radios: {
                type: '全部',
                Charge: '全部',
                condition: '最热'
            }
        };
    },
    methods: {
        changeSizer(name) {
            console.log(name);
        }
    }
};
</script>

<style scoped lang="scss">
.sizer {
    background-color: #fff;
    /deep/.van-radio-group--horizontal {
        height: 70px;
        box-sizing: border-box !important;
    }
    /deep/.van-radio__label {
        line-height: 40px;
        margin: 5px 0;
        font-size: 28px;
    }
    /deep/.van-radio {
        box-sizing: border-box;
        padding: 0 9px;
        line-height: 45px;
        margin: 10px 0;
        font-size: 28px;
        border: solid 1px transparent;
    }
    .selectItem {
        border: solid 1px #ff9800;
        color: #ff9800;
    }
    /deep/.van-radio--horizontal {
        margin-left: 24px;
    }
    /deep/.van-radio__icon {
        display: none;
    }
}
</style>
